<template>
  <div class="goodsTypeIndex">
    <el-card class="box-card">
      <!-- one------------------------------------------------------- -->
      <div slot="header" class="clearfix header">
        <span>商品类型</span>
        <el-button type="primary" round @click="createFn">创建</el-button>
      </div>
      <!-- -------------------------------------------------------------- -->

      <!-- two----------data 指的是表格的数据----------------------------->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="cat_id" label="编号" width="180">
        </el-table-column>
        <!-- 第一栏 -->
        <el-table-column
          prop="cat_name"
          label="类型名称"
          width="180"
        ></el-table-column>
        <!-- 第二栏 -->
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
              @change="changeFn(scope.row)"
              active-value="1"
              inactive-value="0"
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
          <!-- slot-scope=“scope” 定义插槽 scope值为 el-table绑定的data值 scope可自定义名称 -->
          <!-- scope.row代表的是后台返回的表格里这一行的数据 --> </el-table-column
        ><!-- 第三栏 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="shuFn"
              >属性列表</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editFn(scope.row)"
            >
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delFn(scope.row.cat_id)"
            >
            </el-button>
          </template>
        </el-table-column>
        <!-- 第四栏：里面包含两个按钮 使用插槽的方法  <template slot-scope="scope"></template>-->
      </el-table>
      <!-- ----------------------------------------------------------------------------- -->

      <!-- three----编辑弹框------------------------------------------------------------ -->
      <el-dialog
        title="编辑商品类型"
        :visible.sync="isShowEditTk"
        width="30%"
        :before-close="handleClose"
      >
        <!-- form -->
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="类型名称" prop="cat_name">
            <el-input
              type="text"
              v-model="ruleForm.cat_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- /form -->
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowEditTk = false">取 消</el-button>
          <el-button type="primary" @click="submitEditFn">确 定</el-button>
        </span>
      </el-dialog>
      <!-- --------------------------------------------------------------------------------------- -->

      <!-- 分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[2, 10, 20, 30]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagetotal"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
//导入接口
import {
  getGoodsTypeApi,
  deleteGoodsTypeApi,
  putGoodsTypeApi,
  putGoodsTypeStateApi
} from "@/api";
export default {
  created() {
    //getGoodsTypeApi
    //明确：逻辑上这边直接发送异步请求
    //但是，为了后期便于维护，例如分页，搜索继续发送异步请求
    //因为，这些异步请求都是同一个接口，只不过参数不同
    //所以：封装
    this.initData(); //调用initData方法，请求数据
  },
  methods: {
    //异步请求部分（initData是封装的方法，等会记得调用）
    initData() {
      //封装的方法去发送异步请求
      //显示loading
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getGoodsTypeApi({
        // pagenum:1,
        // pagesize:2
        //为了便于后期维护，以后所有接口参数必须放到模型中
        pagenum: this.pagenum,
        pagesize: this.pagesize
      }).then(res => {
        //隐藏loading
        loading.close();
        // console.log(res) //因为在axios请求那一步已经将res=>rs.data，所以这边打印出来的接口数据
        //即使这边获取到了接口数据，可是你会发现提示token有误，那是因为所以的页面展示都是在登入之后的，而登入就会有token的存在，所以这就要求我们在每次请求时在请求头中添加token值，而每一次添加又过于麻烦，所以我们应用了axios的拦截器（api->index.js)
        this.tableData = res.data.list;
        this.pagetotal = parseInt(res.data.total); //分页，total是返回的页数
      });
    },

    //编辑这一步的操作只是显示弹框，只有在弹框出现后获取弹框的数据去发送请求
    //而删除不一样，删除是点击按钮发送异步请求
    editFn(rrow) {
      //显示默认数据显示
      this.isShowEditTk = true;
      //保存当前行数据
      this.ruleForm = rrow;
    },
    //点击编辑弹框的确定按钮去触发异步请求
    submitEditFn() {
      //隐藏弹框
      this.isShowEditTk = false;
      //异步请求
      putGoodsTypeStateApi({
        type_name: this.ruleForm.cat_name,
        type_id: this.ruleForm.cat_id
      }).then(res => {
        if (res.meta.state == 200) {
          this.$message.success("成功");
          this.initData();
        } else {
          this.$message.error(res.meta.msg);
        }
      });
    },

    //删除
    //删除时发送异步请求。请求到的接口数据的状态如果是200提示成功
    delFn(iid) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //异步请求处理
          deleteGoodsTypeApi({
            type_id: iid
          }).then(res => {
            if (res.meta.state == 200) {
              this.$message.success(res.meta.msg);
            } else {
              this.$message.error(res.meta.msg);
            }
          });
          this.initData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    //状态按钮切换,发送异步请求
    changeFn(rrow) {
      // console.log(row)  是整个当前行数据
      putGoodsTypeApi({
        type_id: rrow.cat_id,
        state: rrow.state
      }) /* 这里的type_id，state是请求接口时要传入的数据 */
        .then(res => {
          if (res.meta.state == 200) {
            this.$message.success(res.meta.msg);
          } else {
            this.$message.error(res.meta.msg);
          }
        });
    },

    //属性列表
    shuFn() {
      this.$router.push({ path: "/goods/attr/create" });
    },

    //创建按钮
    createFn() {
      this.$router.push({ path: "/goods/type/create" });
    },

    //分页功能1
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.initData();
    },
    //分页功能2
    handleCurrentChange(val) {
      //  console.log(`当前页: ${val}`);
      //1.修改当前页
      this.pagenum = val;
      //2.重新请求数据
      this.initData(); //不同页面对应的数据不一样
    }
  },

  data() {
    return {
      //变量存放属性值
      tableData: [],

      //列表接口参数
      pagenum: 1,
      pagesize: 2,
      pagetotal: 0,

      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      //控制弹框是否显示
      isShowEditTk: false,
      //表单编辑数据
      ruleForm: {
        attr_name: "",
        cat_id: ""
      },
      rules: {
        //键 ruleForm里面的键
        //值 数组里面是一个个对象 赋值
        cat_name: [
          { required: true, message: "请输入类型名称", trigger: "blur" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ]
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.goodsTypeIndex {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
